<template>
    <div class="elWrapper">
        <h3>示例</h3>
        <el-table
            ref="treeLoadTable"
            :data="tableParams.tableData"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <template v-for="(item,index) in tableParams.tableHeader">
                <el-table-column show-overflow-tooltip :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :sortable="item.isSortable">
                </el-table-column>
            </template>
        </el-table>
        <div class="markdown-body">
            <treeLoadTemplateMD></treeLoadTemplateMD>
        </div>
    </div>   
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import treeLoadTemplateMD from "../md/treeLoadTemplateMD.md"
export default {
    name: "Home",
    components: {
        treeLoadTemplateMD
    },
    data() {
      return {
            tableParams:{
                //接口方法
                // apiName:'',//"queryApi"
                // 表头数据
                tableHeader:[
                    // {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'name', label: '姓名', align: 'center',type:"input",fixed:'',isShow:false},
                    {prop: 'date',label: '日期', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
                    //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
                    //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
                    {prop: 'address', label: '地址', align: 'center',type:"",fixed:'',isShow:true,isSortable:true}
                ],
                //表格数据
                tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                hasChildren:true
                }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                hasChildren:true
                }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                hasChildren:true
                }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
                }],
            }
        }
    },
    methods: {
       load(tree, treeNode, resolve) {
        console.log(tree,treeNode,resolve)
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    },
    mounted(){

    }
}
</script>
<style scoped lang>
    .elWrapper{
        width:100%;
        padding:10px 20px;
        box-sizing:border-box;
    }
    
</style>


